<template>
  <van-nav-bar title="提交个人信息"/>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field v-model="formData.name" name="姓名" label="姓名" placeholder="姓名"
                 :rules="[{ required: true, message: '请填写姓名' }]"/>
      <van-field v-model="formData.phone" name="手机号" label="手机号" placeholder="手机号"
                 :rules="[{ required: true, message: '请填写手机号' }]"/>
      <van-field v-model="formData.id" name="身份证号" label="身份证号" placeholder="身份证号"
                 :rules="[{ required: true, message: '请填写身份证号' }]"/>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">提交</van-button>
    </div>
  </van-form>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import {appStore} from "@/store/appStore";
import {storeToRefs} from "pinia";
import {personApi} from "@/api";
import {showFailToast, showSuccessToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter()
let {userInfo} = storeToRefs(appStore())
const formData = reactive({
  id: "",
  name: "",
  phone: ""
})

const onSubmit = (values: any) => {
  personApi.login.call(formData).then((res: any) => {
    if (res != undefined) {
      userInfo.value.id = res.data.id
      userInfo.value.name = res.data.name
      userInfo.value.phone = res.data.phone
      showSuccessToast('提交成功')
      router.push({name: 'home'})
    } else {
      showFailToast('用户不存在')
    }
  })
}

</script>

<style scoped>

</style>
